<template>
  <el-form class="userinfo-wrapper" size="mini" label-width="80px" label-position="left">
    <el-form-item label="头像">
      <imageUpload :image-props="formData.avatar" @success="coverHandler" />
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="formData.nickname" type="text" placeholder="昵称" />
    </el-form-item>
    <el-form-item label="生日">
      <el-date-picker v-model="formData.birthday" type="date" placeholder="选择日期" />
    </el-form-item>
    <el-form-item label="简介">
      <el-input
        v-model="formData.desc"
        :autosize="{minRows: 5, maxRows: 6}"
        resize="none"
        type="textarea"
        placeholder="没有填写简介"
      />
    </el-form-item>
    <el-form-item label="微信">
      <el-input v-model="formData.wechat" type="text" placeholder="微信" />
    </el-form-item>
    <el-form-item label="微博">
      <el-input v-model="formData.sianweibo" type="text" placeholder="微博" />
    </el-form-item>
    <el-form-item label="QQ">
      <el-input v-model="formData.qq" type="text" placeholder="QQ" />
    </el-form-item>
    <el-form-item label="BILIBILI">
      <el-input v-model="formData.bilibili" type="text" placeholder="BILIBILI" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import imageUpload from "@/components/imageUpload/index.vue";
import { updateUserInfo } from "@/api/user";

export default {
    components: {
        imageUpload,
    },
    data() {
        return {
            formData: {},
        };
    },
    async mounted() {
        await this.getUserInfo();
    },
    methods: {
        async getUserInfo() {
            const userInfo = await this.$store.dispatch("user/getInfo");
            this.formData = userInfo;
        },
        async updateUserInfo(newUserInfo) {
            const { code, message } = await updateUserInfo(newUserInfo);
            const isSuccess = code === 200;
            this.$message({
                type: isSuccess ? "success" : "error",
                message,
            });
        },
        /** @封面 */
        async coverHandler({ file_path: avatar }) {
            this.formData.avatar = avatar;
            await this.updateUserInfo(this.formData);
            await this.$store.dispatch("user/getInfo");
        },
        async submit() {
            await this.updateUserInfo(this.formData);
            await this.$store.dispatch("user/getInfo");
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.userinfo-wrapper {
  width: $baseWidth;
  margin: auto;
}
</style>
